import React, { useState, useEffect } from 'react';
import { Select, Input, Button, Tag, Space, Table, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../../api/salary.js'
import '../Project/Project.scss'
const { Search } = Input;

function Project(props: any) {
    var [project, setProject] = useState([])
    var navigate=useNavigate()
    useEffect(() => { //请求薪资项目
        service.salary_item({}).then((res: any) => {
            // console.log(res);
            setProject(res.data)
        })
    }, [])
    var tiao = () => { //跳转新增定义项目
        navigate('/index/moneys/salary/addproject')
    }
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
        id: any
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '薪资项目类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '进位规则',
            dataIndex: 'rule',
            key: 'rule',
        },
        {
            title: '保留小数位',
            dataIndex: 'minutes',
            key: 'minutes',
        },
        {
            title: '描述',
            dataIndex: 'desc',
            key: 'desc',
        },
        {
            title: '项目来源',
            dataIndex: 'source',
            key: 'source',
        },
        {
            title: '计算公式',
            dataIndex: 'calcula',
            key: 'calcula',
        },
        {
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    <a onClick={() => { handleClick(record.id) }}>删除</a>
                </Space>
            ),
        },
    ];
    const data = project
    var onSearch = (value: any) => { //请求薪资项目的搜索
        service.item_search({ type: value }).then((res) => {
            // console.log(res);
            setProject(res.data)
        })
    }
    var handleClick = async (id: any) => { //删除单条薪资项目
        var res = await service.item_delete({ id })
        // console.log(res);
        service.salary_item({}).then((res: any) => {
            setProject(res.data)
        })
    }
    return (
        <div className='project'>
            <div className='project-one'>
                <div className='project-title-left'></div>
                <h4 className='project-title'>薪资项目</h4>
            </div>
            <div className='project-two'>
                <Search placeholder="请输入关键字" onSearch={(value) => { onSearch(value) }} style={{ width: 320 }} />
                <Button type="primary" style={{ height: 40 }} onClick={()=>{tiao()}}><PlusOutlined />新增自定义项目</Button>
            </div>
            <Table columns={columns} dataSource={data} className='project-three' />
        </div>
    );
}

export default Project;